<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="html5plus://ready"></script>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/page/wallet.css" />
		<script src="../../js/md5.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/function.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/flexible.min.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div class="mui-content">
			<div>
				<div id="segmentedControl" class="mui-segmented-control">
					<a class="mui-control-item mui-active" href="#item1">购买颜值币</a>
					<a class="mui-control-item" href="#item2">开通会员</a>
				</div>
			</div>
			<div>
				<div id="item1" class="mui-control-content mui-active">
					<div class="wallet-box">
						<div class="wallet-neirong">
							<p>颜值币余额：<span>0</span> &nbsp;
								<a href="#a02">查看用途</a>
							</p>
						</div>
						<div id="yanzhi" class="wallet-bi">
							<div class="wallet-bi-left bi-active  wallet_item ">
								<div class="bi-num">
									<img src="../../img/wallet/icon_yanbi_middle.png" alt="" class="bi" />
									<span>1000个</span>
								</div>
								<div class="bi-money bi-active-bgcolor">
									<p class="bi-money-one bi-money-zicolor">100</p>
									<p class="bi-money-zicolor">元</p>
								</div>
							</div>
							<div class="wallet-bi-right wallet_item">
								<div class="bi-num">
									<img src="../../img/wallet/icon_yanbi_middle.png" alt="" class="bi" />
									<span>500个</span>
								</div>
								<div class="bi-money">
									<p class="bi-money-one">50</p>
									<p>元</p>
								</div>
							</div>
						</div>
					</div>

				</div>
				<div id="item2" class="mui-control-content">
					<!--开通会员-->
					<div class="wallet-box">
						<div class="wallet-neirong">
							<p><span>未开通</span><a href="#a01">查看会员特权</a></p>
						</div>
						<div id="member" class="wallet-bi">
							<div class="wallet_item wallet-bi-left bi-active">
								<div class="bi-num">
									<img src="../../img/wallet/ic_tag_vip.png" alt="" class="vip-img" />
									<span>90天</span>
								</div>
								<div class="bi-money bi-active-bgcolor">
									<p class="bi-money-one bi-money-zicolor">99</p>
									<p class="bi-money-zicolor">元</p>
								</div>
							</div>
							<div class=" wallet_item wallet-bi-right">
								<div class="bi-num">
									<img src="../../img/wallet/ic_tag_vip.png" alt="" class="vip-img" />
									<span>30天</span>
								</div>
								<div class="bi-money">
									<p class="bi-money-one">50</p>
									<p>元</p>
								</div>
							</div>
						</div>
					</div>
					<!--颜值币支付方式-->

					<!--开通会员支付方式-->

					<!--颜值币特权-->

				</div>
			</div>
			<div class="tishi">
				<img src="../../img/wallet/tuijian.png" alt="" />
				<span>推荐使用支付宝（用支付宝多送10天会员或100颜值币）</span>
			</div>
			<div class="wallet-way wallet-way-vip">
				
				<!--<p>选择支付方式</p>-->
				<div class="wallet-way-charge">
					<li id="zhifubao" class="active">
						<img src="../../img/wallet/zfb.png" alt="" class="wallet-charge-img" />
						<span>支付宝</span>
					</li>
					<li id="weixin">
						<img src="../../img/wallet/wx.png" alt="" class="wallet-charge-img" />
						<span>微信</span>

					</li>
					<li id="bank">
						<img src="../../img/wallet/yinlian.png" alt="" class="wallet-charge-img" />
						<span>银行卡</span>

					</li>
				</div>
			</div>

			<div id="a02" class="bi-tequan" style="display: none;">
				<p class="bi-tequan-title">颜值币用途</p>
				<div class="bi-bigimg">
					<img src="../../img/wallet/wallet_yzb.png" alt="" />
				</div>
			</div>
			<!--开通会员特权-->
			<div id="a01" class="bi-tequan bi-tequan-vip">
				<p class="bi-tequan-title">VIP会员特权</p>
				<div class="huiyuan-bigimg">
					<img src="../../img/wallet/wallet_vip.png" alt="" />
				</div>
			</div>
			<div class="bi-charge-money">
				<div class="heji">
					<span>合计：</span>
					<span>¥</span>
					<span></span>
				</div>
				<div class="zhifu mui-active">
					立即支付
				</div>
			</div>
		</div>
		<script src="../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.plusReady(function() {
				mui.init({
					beforeback: function() {
						var list = plus.webview.getWebviewById('My');
						mui.fire(list, 'myupdate');
						return true
					}
				});
				var self = plus.webview.currentWebview();
				var Switch = self.type;
				//价格 ~变量
				var wallet_price = 100;
				var wallet2_price = 99;
				var wallet_type = 'zhifubao';
				var top_type, pay_type, walletItem, BgItem, payLi;
				var topItem = document.getElementsByClassName("mui-control-item");

				if(Switch == 1) {
					top_type = "#item1";
				} else {
					top_type = "#item2";
				}
				for(var i = 0; i < topItem.length; i++) {
					topItem[i].addEventListener('tap', function() {
						top_type = this.getAttribute('href');
						if(top_type == "#item1") {
							pagetype(top_type);
							Switch = 1
							Sw()

						} else if(top_type == "#item2") {
							pagetype(top_type);
							Switch = 2
							Sw()
						}
					})
				}
				//控制选项卡
				function Sw() {
					if(Switch == 1) {
						document.getElementById("item1").style.display = 'block';
						document.getElementById("item2").style.display = 'none';
						mui('.mui-segmented-control .mui-control-item')[0].classList.add('mui-active');
						mui('.mui-segmented-control .mui-control-item')[1].classList.remove('mui-active');
						document.getElementsByClassName("bi-tequan")[0].style.display = 'block'
						document.getElementsByClassName("bi-tequan-vip")[0].style.display = 'none'

						document.getElementsByClassName("heji")[0].children[2].innerHTML = wallet_price;
					} else {
						document.getElementById("item1").style.display = 'none';
						document.getElementById("item2").style.display = 'block';
						mui('.mui-segmented-control .mui-control-item')[0].classList.remove('mui-active');
						mui('.mui-segmented-control .mui-control-item')[1].classList.add('mui-active');
						document.getElementsByClassName("bi-tequan")[0].style.display = 'none'
						document.getElementsByClassName("bi-tequan-vip")[0].style.display = 'block'
						document.getElementsByClassName("heji")[0].children[2].innerHTML = wallet2_price;
					}
				}
				Sw();
				window.addEventListener('myupdate', function(event) {
					console.log('来充足了……')
					mui.get(getApiUrl('http://www.jiaoyou0.cn', 'user/userDetail/'), {}, function(data) {
						user_info = data.data;
						plus.storage.setItem('user_info', JSON.stringify(data.data))
					}, 'json');
					document.getElementsByClassName("wallet-neirong")[0].children[0].children[0].innerText = user_info.coin;
					document.getElementsByClassName("wallet-neirong")[1].children[0].innerText = isvipcoin(true);
				})
				// 根据传入的coins改变余额数目
				document.getElementsByClassName("wallet-neirong")[1].children[0].children[0].innerText = isvipcoin(true);
				document.getElementsByClassName("wallet-neirong")[0].children[0].children[0].innerText = user_info.coin;




				//切换类型

				function pagetype(top_type) {
					payLi = document.getElementsByClassName("wallet-way-charge")[0].getElementsByTagName('li');

					if(top_type == "#item1") {
						walletItem = document.getElementById("yanzhi").getElementsByClassName('wallet_item');
						BgItem = document.getElementById("yanzhi").getElementsByClassName('bi-money');

						document.getElementsByClassName("heji")[0].children[2].innerHTML = wallet_price;
						//切换支付方式

					} else if(top_type == "#item2") {
						walletItem = document.getElementById("member").getElementsByClassName('wallet_item');
						BgItem = document.getElementById("member").getElementsByClassName('bi-money');
						document.getElementsByClassName("heji")[0].children[2].innerHTML = wallet2_price;

					}

					for(var i = 0; i < walletItem.length; i++) {
						walletItem[i].addEventListener('tap', function() {
							for(var j = 0; j < walletItem.length; j++) {
								if(walletItem[j].classList.contains("bi-active")) {
									walletItem[j].classList.remove('bi-active');
								};
								if(BgItem[j].classList.contains('bi-active-bgcolor')) {
									BgItem[j].classList.remove('bi-active-bgcolor');
								};
							}
							this.classList.add('bi-active');
							this.children[1].classList.add('bi-active-bgcolor');
							if(top_type == "#item1") {
								wallet_price = parseInt(this.children[1].children[0].innerText)

								document.getElementsByClassName("heji")[0].children[2].innerHTML = wallet_price;

							} else {
								wallet2_price = parseInt(this.children[1].children[0].innerText);
								document.getElementsByClassName("heji")[0].children[2].innerHTML = wallet2_price;
							}

						});
					};

					for(var i = 0; i < payLi.length; i++) {
						payLi[i].addEventListener('tap', function() {
							wallet_type = this.getAttribute('id');
							for(var j = 0; j < payLi.length; j++) {
								payLi[j].className = "";
							}
							this.className = "active";
						})
					}

				}
				pagetype(top_type)
				
				//支付
				document.getElementsByClassName("zhifu")[0].addEventListener('tap', function() {
					
					if(wallet_type == 'zhifubao') {
						pay('alipay')
					} else if(wallet_type == 'weixin') {
						var msgs = '本平台多次接到微信支付反馈，有多位用户向微信支付投诉产品女用户存在涉黄行为，在视频聊天过程中存在暴露行为，平台会继续监控，如发现用户有涉黄行为，请向客服投诉。充值用户请点继续充值。';
						mui.confirm(msgs,'',['取消','继续支付'],function(e){
							if(e.index==1){
								pay('wxpay')	
							}
						},'div')
					} else if(wallet_type == 'bank') {
						pay('Bank')
					}

				})
				var pays = {};
				plus.payment.getChannels(function(channels) {
					for(var i in channels) {
						var channel = channels[i];
						if(channel.id == 'qhpay' || channel.id == 'qihoo') {
							continue
						}
						pays[channel.id] = channel;
						checkServices(channel)
					}
				}, function(e) {
					outLine('获取支付通道失败：' + e.message)
				});

				function checkServices(pc) {
					if(!pc.serviceReady) {
						var txt = null;
						switch(pc.id) {
							case 'alipay':
								txt = '检测到系统未安装“支付宝快捷支付服务”，无法完成支付操作，是否立即安装？';
								break;
							default:
								txt = '系统未安装“' + pc.description + '”服务，无法完成支付，是否立即安装？';
								break
						}
						plus.nativeUI.confirm(txt, function(e) {
							if(e.index == 0) {
								pc.installService()
							}
						}, pc.description)
					}
				};
				var ALIPAYSERVER = getApiUrl('http://www.jiaoyou0.cn', 'pay/zhifubao');
				var WXPAYSERVER = getApiUrl('http://www.jiaoyou0.cn', 'pay/weixin');
				var BANKSERVER = getApiUrl('http://www.jiaoyou0.cn', 'pay/yinhangka');
				function openSUCCESS(leixing){
					mui.openWindow({
						url: 'success.html',
						id: 'success',
						extras: {
							type: leixing
						},
						styles: {
							titleNView: {
								titleText: "充值记录",
								titleColor: "#FFF",
								titleSize: "20px",
								backgroundColor: "#fd698d",
								splitLine: {
									color: "#CCCCCC",
									height: "1px" //
								},
								autoBackButton:true
							}
						}
					})
				}
				function pay(id) {
					if(top_type == "#item1") {
						wallet_price = wallet_price;
					} else if(top_type == "#item2") {
						wallet_price = wallet2_price;
					}
					var PAYSERVER = '';
					var url;
					if(id == 'alipay') {
						url = ALIPAYSERVER + '&money=' + wallet_price;
					} else if(id == 'wxpay') {
						url = WXPAYSERVER + '&money=' + wallet_price
					} else {
						url = BANKSERVER + '&money=' + wallet_price
					}
					if(Switch == 2) {
						url = url + '&vip=1'
					}
					var xhr = new XMLHttpRequest();
					xhr.onreadystatechange = function() {
						switch(xhr.readyState) {
							case 4:
								if(xhr.status == 200) {
									var data = JSON.parse(xhr.responseText);
									code = data.code;
									if(code == 201) {
										plus.nativeUI.alert(data.message)
									}
									if(code == 3) {
										openSUCCESS(data.data)
									} else if(code == 4) {
										plus.runtime.openURL(data.data)
										document.addEventListener("resume", function() {
											openSUCCESS('chongzhi')
										}, false);
									} else if(code == 99) {
										plus.payment.request(pays[id], data.data, function(result) {
											openSUCCESS('chongzhi')
										}, function(e) {})
									}
								} else {
									alert('获取订单信息失败！', null, '充值')
								}
								break;
							default:
								break
						}
					};
					xhr.open('GET', url);
					xhr.send()
				}
			})
		</script>
	</body>

</html>